<template>
    <div class="app">
        <h2>{{ msg }}</h2>
        <input type="text" v-model="msg">
    </div>
</template>

<script lang="ts" setup>
import { ref, reactive, customRef } from "vue"

//使用vue提供的默认ref定义响应数据，数据一变，页面就更新
// let msg = ref('你好')

//使用vue 提供的customRef 定义的数据
let initValue = '你好'
let msg = customRef((track, trigger) => {
    return {
        //msg被读取时调用
        get() {
            track() //告诉vue数据msg很重要，对msg进行持续关注，一旦msg变化就去更新
            return initValue
        },
        //msg被修改时调用
        set(value) {
            initValue = value
            trigger() //通知vue 数据msg 变化
        }
    }
})

</script>

<style lang="scss" scoped></style>
